<template>
	<view class="img_cons">
		<view class="closePage" :style="{height: navBarHeight+'px'}" @click="closePage">
		  <image class="avatar_icon" src="http://img-kslive.doubaozhidao.com/gridcover/close_icon.png"></image>
		</view>
		<view class="border_item" :style="{width:imageData.length==2||imageData.length==4?(imgWidth*2+10)+'px':(imgWidth*3+20)+'px'}">
			<template v-if="imageData.length==4">
				<view v-for="(item,index) in imageData" :key="item.id"  class="split_img_4" :style="{width:imgWidth+'px',height:imgHeight+'px'}">
				  <image :id="'img'+index" :src="item.path" mode="" :style="{width:imgWidth+'px',height:imgHeight+'px'}" />
				</view>
			</template>
			<template v-else>
				<view v-for="(item,index) in imageData" :key="item.id"  class="split_img" :style="{width:imgWidth+'px',height:imgHeight+'px'}">
				  <image :id="'img'+index" :src="item.path" mode="" :style="{width:imgWidth+'px',height:imgHeight+'px'}" />
				</view>
			</template>
			<!-- <image class="images_item" v-for="(item,index) in imgList" :key="item.id"  :src="item.url" :style="{width:item.width+'px',height:item.height+'px','margin-left':item.flex+'px','margin-right':item.flex+'px'}"></image> -->
			
		</view>
		
		<view class="save_btn" @click="saveAll">
			保存图片
		</view>
	</view>
	
</template>

<script>
	import html2canvas from 'html2canvas';
	import {deepClone} from '../../../utils/common.js'
	export default{
		props:{
			datas:{
				type:Array,
				default:[]
			},
			width: {
				type: [String,Number],
				default: ''
			},
			height: {
				type: [String,Number],
				default: ''
			},
			value:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				imageData:[],
				imgWidth:0,
				imgHeight:0,
				navBarHeight:0,
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			console.log(systemInfo,'menuButtonInfo---')
			this.navBarHeight = systemInfo.statusBarHeight + 44
			// 导航栏高度 = 状态栏高度 + 44
		},
		watch:{
			'datas':{
				immediate:true,
				handler(news){
					let list = deepClone(news)
					console.log(news,'0datas-0-')
					// this.sortImg()
					list.sort((a,b)=>{
						return a.id > b.id ? 1 : -1;
					})
					this.imageData = list
					this.imgWidth =this.width
					this.imgHeight = this.height
				}
			},
		},
		methods:{
			closePage(){
				this.$emit('input',true)
			},
			saveAll() {
				uni.showLoading({
					title: '正在保存...',
				})
				let imgNum = this.imageData.length
				let count = 0
				for (let i = 0; i < this.imageData.length; i++) {
					html2canvas(document.querySelector("#img"+i), {
						useCORS: true
					}).then(canvas => {
						const file = document.createElement("a");
						file.style.display = "none";
						file.href = canvas.toDataURL("image/jpg");
						file.download = decodeURI('clipImg'+i);
						document.body.appendChild(file);
						file.click();
						document.body.removeChild(file);
						count = count + 1
						uni.showLoading({
							title: `正在保存第${count}/${imgNum}张`,
						})
						if (count == imgNum) {
							uni.hideLoading()
						}
					});
				}
				
			}
		}
	}
</script>

<style scoped>
	.img_cons{
		width: 100vw;
		min-height: 100vh;
		background-color: #0E0E12;
		padding-top: 0;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		position: relative; 
		overflow: hidden;
	}
	.border_item{
		width: 100%;
		margin: 0 auto;
		margin-top: 41rpx;
		display: flex;
		flex-wrap: wrap;
		align-self: center;
		justify-content: center;
	}
	.split_img{
	  /* background-color: #B5B5DB; */
	  margin-right: 10px;
	  margin-bottom: 10px;
	}
	.split_img_4{
	  /* background-color: #B5B5DB; */
	  margin-right: 10px;
	  margin-bottom: 10px;
	}
	.border_item .split_img_4:last-child{
	  margin-right: 0!important;
	}
	.border_item .split_img_4:nth-child(2n){
	  margin-right: 0!important;
	}
	.border_item .split_img:last-child{
	  margin-right: 0!important;
	}
	.border_item .split_img:nth-child(3n){
	  margin-right: 0!important;
	}
	.closePage{
	  width: 100%;
	  display: flex;
	  align-items: center;
	  /* position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 8; */
	  padding-left: 40rpx;
	  box-sizing: border-box;
	}
	.closePage image{
	  display: block;
	  width: 54rpx;
	  height: 54rpx;
	}
	
	.save_btn{
	  width: 250rpx;
	  height: 78rpx;
	  margin: 0 auto;
	  margin-top: 40rpx;
	  background: #0E5AD3;
	  border-radius: 16rpx;
	  font-size: 26rpx;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: bold;
	  color: #FFFFFF;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  line-height: 37rpx;
	}
</style>